<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>CSS画太极</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
        #container{background:white;width:800px;height:800px;margin:0 auto;position:relative;}
        .big1{width:600px;height:600px;border:1px solid black;border-radius:300px;background:black;
                position:absolute;top:0px;right:100px;z-index:3;}
        .big2{width:400px;height:600px;border:1px solid white;background:white;
                position:absolute;top:0px;right:0px;z-index:3;}
        .big3{width:600px;height:600px;border:1px solid black;border-radius:300px;
                position:absolute;top:0px;right:100px;z-index:3;}
        .small1{width:300px;height:300px;border-right:1px solid black;border-radius:150px;background:black;
                position:absolute;top:0px;left:250px;z-index:3;}
        .small2{width:300px;height:300px;border-right:1px solid white;border-radius:150px;background:white;
                position:absolute;top:300px;left:250px;z-index:4;}
        #min1{width:100px;height:100px;background:white;border-radius:75px;
                position:absolute;top:100px;left:350px;z-index:5;}
        #min2{width:100px;height:100px;background:black;border-radius:75px;
                position:absolute;top:400px;left:350px;z-index:6;}
</style>
</head>
    <body>
    <div id="container">
          <div class='big1'></div>
          <div class="big2"></div>
            <div class="big3"></div>
            <div class="small1"></div>
            <div class="small2"></div>
            <div id="min1"></div>
            <div id="min2"></div>
    </div>
    </body>
</html>
